<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/constant/url.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/style.css">
    <title>北小齐珍藏</title>
</head>

<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <nav class="top-nav">
            <div class="nav-left">
                <div class="logo" v-if="!isMobile">
                    <a href="./index.html">
                        <img src="./imgs/218x60.png" alt="logo">
                    </a>
                </div>
            </div>
            <div class="nav-right">
                <div class="user-info" v-if="currentUser">
                    <span class="username">{{ currentUser.username }}</span>
                    <span class="permission-badge" :class="getPermissionClass(currentUser.permission)">
                        {{ getPermissionText(currentUser.permission) }}
                    </span>
                </div>
                <div class="nav-buttons">
                    <button class="nav-button" v-if="currentUser && currentUser.permission >= 3" @click="goToAdmin">
                        <i class="mdi mdi-cog"></i>
                        <span>后台</span>
                    </button>
                    <button class="nav-button" v-if="currentUser && currentUser.permission > 0" @click="logout">
                        <i class="mdi mdi-logout"></i>
                        <span>退出</span>
                    </button>
                    <button class="nav-button" v-else @click="login">
                        <i class="mdi mdi-login"></i>
                        <span>登录</span>
                    </button>
                </div>
            </div>
        </nav>

        <!-- 网站列表 -->
        <header>
            <div class="header-content">
                <h1>{{ showFavorites ? '收藏夹' : '北小齐珍藏' }}</h1>
                <div class="category-selector">
                    <select v-model="selectedCategory" @change="changeCategory">
                        <option value="all">全部</option>
                        <option v-for="category in categories" :key="category" :value="category">
                            {{ category }}
                        </option>
                    </select>
                    <div class="category-right">
                        <button class="nav-button" :class="{ active: showFavorites }" @click="toggleFavorites"
                            v-if="currentUser.permission > 0">
                            <i class="mdi mdi-heart"></i>
                            <span>收藏夹</span>
                        </button>
                        <p>数据数量&ensp;<span>{{ filteredSites.length }}</span></p>
                    </div>
                </div>
            </div>
        </header>

        <!-- 网站卡片 -->
        <main>
            <div class="site-cards">
                <div v-for="site in filteredSites" :key="site.id" class="site-card">
                    <div class="site-icon">
                        <img :src="site.ico" :alt="site.name" v-if="site.ico">
                        <i :class="site.icon" v-else></i>
                    </div>
                    <div class="site-info">
                        <h3>{{ site.name }}</h3>
                        <p>{{ site.desc }}</p>
                    </div>
                    <div class="site-actions">
                        <!-- 收藏按钮 -->
                        <button class="favorite-btn" title="收藏" @click="addToFavorites(site)"
                            v-if="currentUser && currentUser.permission > 0">
                            <i class="mdi mdi-heart"></i> <span>收藏</span>
                        </button>
                        <!-- 查看链接 -->
                        <a :href="site.src" title="查看" target="_blank" class="visit-btn">
                            <i class="mdi mdi-open-in-new"></i> <span>查看</span>
                        </a>
                    </div>
                </div>
            </div>
        </main>

        <!-- Toast -->
        <div class="toast-container" v-if="toast.show">
            <div class="toast" :class="toast.type">
                {{ toast.message }}
            </div>
        </div>

        <!-- 网站底部信息 -->
        <footer class="site-footer">
            <div class="footer-content">
                <p>© 2024 北小齐珍藏 - 网站收藏分享平台</p>
                <div class="icp-info">
                    <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
                        豫ICP备2025111252号-1
                    </a>
                    <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
                        豫ICP备2025111252号
                    </a>
                </div>
            </div>
        </footer>
    </div>
    <script src="js/index.js"></script>
</body>

</html>